<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>canvas 基础demo</title>
	</head>
	<body>
		<canvas id="canvas" width="960" height="500">您的浏览器不支持</canvas>
		<script type="text/javascript">
			//demo1  绘制直线
			var c=document.getElementById("canvas");
			var ctx=c.getContext("2d");
			ctx.beginPath();
			ctx.lineWidth = 5;
			ctx.moveTo(20,20);
			ctx.lineTo(200,20);
			ctx.stroke();
			
			//demo2  多点相连直线
//			var c=document.getElementById("canvas");
//			var ctx=c.getContext("2d");
//			ctx.beginPath();
//			ctx.lineJoin="round"; 			//属性值 bevel、round、miter  倾斜、圆角、默认尖角
//			ctx.moveTo(20,50);
//			ctx.lineTo(100,50);
//			ctx.lineTo(20,100);
//			ctx.lineTo(100,100);
//			ctx.stroke();
			
			//demo3 绘制空心矩形
//			var c=document.getElementById("canvas");
//			var ctx=c.getContext("2d");
//			ctx.lineWidth="10";
//			ctx.strokeStyle="blue";
//			ctx.strokeRect(110,100,150,100);
//			ctx.stroke();
			
			//demo4 绘制实心矩形
//			var c=document.getElementById("canvas");
//			var ctx=c.getContext("2d");
//			
////			ctx.fillStyle = "orange";
////			ctx.fillRect(10,10,150,100);
//			
//			//渐变填充
//			var linear = ctx.createLinearGradient(10,60,150,150);  
//			//线性渐变 createLinearGradient(x1,y1,x2,y2)   
//			//圆形渐变createRadialGradient(x1,y1,r1,x2,y2,r2)  r1与r2分别是起点圆的半径和终点圆的半径
//			linear.addColorStop(0,'#fff');
//			linear.addColorStop(0.5,'#f0f');
//			linear.addColorStop(1,'#333');
//			ctx.fillStyle = linear; //把渐变赋给填充样式
//			ctx.fillRect(100,100,100,100);
//			ctx.stroke(); 
			
			//demo5 创建园
//			var c=document.getElementById("canvas");
//			var ctx=c.getContext("2d");
//			ctx.beginPath();
//			ctx.arc(100,75,50,0,2*Math.PI);
//			//context.arc(x,y,r,sAngle,eAngle,counterclockwise);
//			//x 			圆的中心的 x 坐标。
//			//y 			圆的中心的 y 坐标。
//			//r 			圆的半径。
//			//sAngle 		起始角，以弧度计。（弧的圆形的三点钟位置是 0 度）。
//			//eAngle 		结束角，以弧度计。
//			//counterclockwise 	可选。规定应该逆时针还是顺时针绘图。False = 顺时针，true = 逆时针。
//			ctx.stroke();
			
			//demo6  放大缩小
//			var c=document.getElementById("canvas");
//			var ctx=c.getContext("2d");
//			ctx.strokeStyle="blue";
//			ctx.strokeRect(10,10,60,60);
//			//context.scale(scalewidth,scaleheight); 缩放宽度和高度
//			ctx.scale(2,2);
//			ctx.strokeStyle="red";
//			ctx.strokeRect(10,10,60,60);
			
			
			//demo7 旋转画布
//			var c=document.getElementById("canvas");
//			var ctx=c.getContext("2d");
//			ctx.rotate(20*Math.PI/180);
//			//context.rotate(angle);
//			//旋转角度，以弧度计。
//			//如需将角度转换为弧度，请使用 degrees*Math.PI/180 公式进行计算。
//			//举例：如需旋转 5 度，可规定下面的公式：5*Math.PI/180。
//			ctx.fillRect(50,20,100,50);

			//demo8 绘制文本
//			var c=document.getElementById("canvas");
//			var ctx=c.getContext("2d");
//			ctx.font="40px 微软雅黑";
//			ctx.fillText("canvas",10,50);

		</script>
	</body>
</html>
